<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="图标" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">基本示例</view>
					<tm-icons :size="48" name="icon-filter-fill"></tm-icons>
					<tm-icons color="red" :size="48" name="icon-paperplane-fill"></tm-icons>
					<tm-icons color="blue" :size="48" name="icon-position-fill"></tm-icons>
					<tm-icons color="pink" :size="48" name="icon-layergroup-fill"></tm-icons>
					<tm-icons  color="green" :size="48" name="icon-unlock-fill"></tm-icons>
					
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">图片图标</view>
				
					<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"></tm-icons>
					<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Candles-freebie-icon.png"></tm-icons>
					<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Box-freebie-icon-1.png"></tm-icons>
					<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Present-freebie-icon.png"></tm-icons>
					<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Flag-freebie-icon.png"></tm-icons>
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">其它组件上应用图标</view>
					<tm-listitem :margin="[0,32]"  title="应用图标" :show-left-icon="true" left-icon="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"></tm-listitem>
					<view class="flex-between">
						<tm-button  icon="icon-paperplane-fill" theme="bg-gradient-blue-accent">飞信</tm-button>
						<tm-button  :icon-size="60" icon="https://cdn.roundicons.com/wp-content/uploads/2017/09/Candles-freebie-icon.png" theme="white">飞信</tm-button>
					</view>
				</tm-sheet>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmIcons,tmListitem},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
